<template>
    <section class="loginMask" v-if="$store.state.AuthUser.loginShow">
        <div class="loginContent" :style="style">
            <div class="drag" @mousedown="move">
                <span class="loginClose el-icon-close" @click="loginClose();clearInfo();forget=true"></span>
            </div>
            <div class="loginRegisterTitle">
                {{loginRegisterTitleText}}
            </div>
            <span class="loginPoint">
                {{loginRegisterPoint}}
            </span>
        <transition name="component-fade" mode="out-in">
                <template v-if="forget">
                    <el-tabs v-model="$store.state.AuthUser.loginName" @tab-click="handleClick">
                        <el-tab-pane label="登录" name="login" ref="loginForm">
                            <form action="" @submit.prevent="userLogin">
                            <div class="loginBox">
                                <ul class="loginList">
                                    <li>
                                        <!-- <i class="mobileImg"></i> -->
                                        <input v-model="mobile"
                                            v-validate data-vv-rules="required|mobile" data-vv-as="手机号"
                                            id="mobile" type="telete" class="" name="mobile" required placeholder="请输入手机号码" maxlength="11">
                    <span class="help-block" v-show="errorBags.has('mobile')">{{errorBags.first('mobile')}}</span>
                                </li>
                                <li>
                                    <!-- <i class="mobilePw"></i> -->
                                    <input v-model="password"
                                        v-validate data-vv-rules="required|min:6|max:18" data-vv-as="密码"
                                        type="password" class="form-control" name="password" required placeholder="密码"  @keyup.13="userLogin">
                                    <span class="help-block" v-show="errorBags.has('password')">{{errorBags.first('password')}}</span>
                                    <span class="help-block" v-if="mismatchError">{{bag.first('password:auth')}}</span>
                                </li>
                                <!-- <li class="registerNum">
                                    <div class="clearfix">
                                        <input type="text" class="verificationInp" placeholder="请输入验证码">
                                        <div class="registerImg">
                                            <button type="button">点击发送验证码</button>
                                        </div>
                                    </div>
                                </li> -->
                            </ul>
                            
                            <div class="loginBtn">
                                <button @submit.prevent="userLogin">{{loginText}}</button>
                            </div>
                            <p class="clearfix inputTel">
                                <!-- <span>请输入手机号</span> -->
                                <!-- <span>验证码登录</span> -->
                                <span @click="forget=false;forgetPw()">忘记密码</span>
                            </p>
                        </div>
                         </form>
                    </el-tab-pane>
                    <el-tab-pane label="注册" name="register" ref="registerForm">
                        <form action="" @submit.prevent="register">
                            <div class="registerBox">
                                <ul>
                                    <li class="registerList">
                                        <!-- <i class="nameImg"></i> -->
                                        <input v-model="name" placeholder="昵称"
                                            v-validate data-vv-rules="required|max:7" data-vv-as="昵称"
                                            id="name" type="text" class="form-control" name="name" required>
                                        <span class="help-block" v-show="errorBags.has('name')">{{errorBags.first('name')}}</span>
                                    </li>
                                        <li class="registerList">
                                            <!-- <i class="mobileImg"></i> -->
                                            <input v-model="registerMobile"  v-validate data-vv-rules="required|mobile" data-vv-as="手机号" id="registerMobile" type="mobile" class="" name="mobile" required placeholder="请输入手机号码" maxlength="11">
                        <span class="help-block" id="verSpan" v-show="errorBags.has('mobile')">{{errorBags.first('mobile')}}</span>
                                        </li>
                                        
                                        <li class="registerList">
                                            <input type="text" placeholder="输入验证码" v-model="veriNum" style="width: 205px;padding-left: 10px;background-image:none">
                                            <button :disabled="disabledOnoff" type="button" @click="emitverCode('register','registerMobile')" >{{verText}}</button>
                                        </li>
                                        
                                    <li class="registerList">
                                        <!-- <i class="mobilePw"></i> -->
                                        <!-- <input type="text" placeholder="设置密码" v-model="UserRegister.passWord"> -->
                                        <input v-model="password" placeholder="设置密码"
                        v-validate data-vv-rules="required|min:6|max:18" data-vv-as="密码"
                            type="password" class="form-control" name="password" required>
                    <span class="help-block" v-show="errorBags.has('password')">{{errorBags.first('password')}}</span>
                                    </li>
                                    <li class="registerList">
                                        <!-- <i class="mobilePw"></i> -->
                                        <!-- <input type="text" placeholder="请再次输入密码" v-model="UserRegister.passWords"> -->
                                        <input id="registerPassword-confirm" placeholder="请再次输入密码"
                                            v-validate data-vv-rules="required|min:6|confirmed:password" data-vv-as="确认密码"
                                            type="password" class="form-control" name="password_confirmation" required>
                                        <span class="help-block" v-show="errorBags.has('password_confirmation')">{{errorBags.first('password_confirmation')}}</span>
                                    </li>
                                </ul>
                                <p class="pwProblem">
                                    <!-- <i class="iconfont icon-zhuyi"></i> 两次输入不一致 -->
                                </p>
                                <div class="registerBtn">
                                    <div>
                                        <button @submit.prevent="register">注册</button>
                                    </div>
                                    <!-- <p>
                                        点击注册表示同意拓者模型<span @click="loginClose"><router-link :to="{name: 'aboutJs', params: {activeName:'userPact'}}" tag="span">“用户协议”</router-link></span>
                                    </p> -->
                                </div>
                            </div>
                        </form>
                       
                    </el-tab-pane>
                </el-tabs>
            </template>
            <div v-else>
                <div class="forgetBox">
                    <!-- <header>找回密码</header> -->
                    <p class="knowPw"><button @click="forget=true;goLogin()">去登录</button></p>
                    <form action="" @submit.prevent="forgetForm" ref="forgetFormBox">
                        <div class="registerBox">
                            <ul>
                                    <li class="registerList">
                                        <!-- <i class="mobileImg"></i> -->
                                        <input v-model="forgetMobile"  v-validate data-vv-rules="required|mobile" data-vv-as="手机号" id="forgetMobile" type="mobile" class="" name="mobile" required placeholder="请输入手机号码" maxlength="11">
                    <span class="help-block" id="forgetVerSpan" v-show="errorBags.has('mobile')">{{errorBags.first('mobile')}}</span>
                                    </li>
                                    
                                    <li class="registerList">
                                        <input type="text" placeholder="输入验证码" v-model="forgetVeriNum" style="width: 206px;padding-left: 10px;background-image:none">
                                        <button id="forgetPw" :disabled="forgetDisabledOnoff" type="button" @click="emitverCode('forgotpass','forgetMobile')">{{forgetVerText}}</button>
                                    </li>
                                    
                                 <li class="registerList">
                                    <!-- <input type="text" placeholder="设置密码" v-model="UserRegister.passWord"> -->
                                    <input v-model="forgetPassword" placeholder="设置密码"
                       v-validate data-vv-rules="required|min:6|max:18" data-vv-as="密码"
                        type="password" class="form-control" name="password" required>
                <span class="help-block" v-show="errorBags.has('password')">{{errorBags.first('password')}}</span>
                                </li>
                                 <li class="registerList">
                                    <!-- <input type="text" placeholder="请再次输入密码" v-model="UserRegister.passWords"> -->
                                   <input id="password-confirm" placeholder="请再次输入密码" v-model="password"
                                        v-validate data-vv-rules="required|min:6|confirmed:password" data-vv-as="确认密码"
                                        type="password" class="form-control" name="password_confirmation" required>
                                    <span class="help-block" v-show="errorBags.has('password_confirmation')">{{errorBags.first('password_confirmation')}}</span> 
                                </li>
                            </ul>
                            <p class="pwProblem">
                                <!-- <i class="iconfont icon-zhuyi"></i> 两次输入不一致 -->
                            </p>
                            <div class="registerBtn">
                                <div>
                                    <button @submit.prevent="forget">确认</button>
                                </div>
                               <!--  <p>
                                    
                                    点击注册表示同意拓者模型<span @click="loginClose"><router-link :to="{name: 'aboutJs', params: {activeName:'userPact'}}" tag="span">“用户协议”</router-link></span>
                                </p> -->
                            </div>
                        </div>
                        </form>
                </div>
            </div>
            </transition>
            <div class="thereBox">
                <p class="thereLine"></p>
                <p class="thereText">第三方账号登录</p>
                <div class="thereIcon">
                    <!-- <a href="http://192.168.1.162/threelogin/wechat" target="_blank"><div> -->
                        
                    <a href="/threelogin/wechat" target="_blank"><div>
                    </div></a>
                     <!-- <a href="http://192.168.1.162/threelogin/qq" target="_blank"><div> -->
                     <a href="/threelogin/qq" target="_blank"><div>
                       
                    </div></a>
                </div>
            </div>
        </div>
        
    </section>
</template>
<script>

import jwtToken from '../helpers/jwt'
import { ErrorBag } from 'vee-validate';

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';

export default {
    name:"loginMask",
    data(){
        return{
            forgetPassword:"",//忘记密码
            mobile:"",//手机号
            password:"",//，密码
            registerMobile:"",//注册手机号
            verText : "获取验证码",//获取验证码
            forgetMobile : "",//忘记密码手机号
            forgetVerText : "获取验证码",//忘记密码获取验证码
            forgetVeriNum : "",//忘记密码验证码
            bag : new ErrorBag(),
            name : '',//用户名
            veriNum : "",//验证码
            style:{//弹窗的位置
                top: "300px",
                left: "600px"
            },
            loginText:"登录",
            disabledOnoff:false,//控制发送验证码按钮
            disabledNum : 60,//验证码60秒计时
            forget : true,//忘记密码弹出框
            forgetDisabledOnoff:false,//控制发送验证码按钮
            forgetDisabledNum : 60,//验证码60秒计时
            loginBtnNo :true,//登录按钮
            loginRegisterTitleText:'登录集设网',//登录或注册
            loginRegisterPoint:'还没有账号？',//登录或注册的提示
            loginRegisterOnoff:true,//登录注册的开关控制提示信息

        }
    },
    methods: {
        move(e){//弹出框拖拽
	      let odiv = e.target.parentNode;    //获取目标元素
	       
	      //算出鼠标相对元素的位置
	      let disX = e.clientX - odiv.offsetLeft;
	      let disY = e.clientY - odiv.offsetTop;
	      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
	        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
	        let left = e.clientX - disX;  
	        let top = e.clientY - disY;
	         
	        //绑定元素位置到positionX和positionY上面
	        this.positionX = top;
	        this.positionY = left;
	         
	        //移动当前元素
	        odiv.style.left = left + 'px';
	        odiv.style.top = top + 'px';
	      };
	      document.onmouseup = (e) => {
	        document.onmousemove = null;
	        document.onmouseup = null;
	      };
	    },
        ...mapMutations([//axios中的方法
            "loginClose",//关闭弹窗
            "loginLoginName",//注册成功切换到登录选项卡
        ]),
        ...mapActions([
                "ansyLoginShow",
                "ansyLoginOut",
                "setAuthUser"
        ]),
        WeLogin(){//微信登录按钮
            
            
        },
        QQLogin(){//qq登录按钮
            // console.log('qq登录')
        },
        clearInfo(){//清除注册信息
            this.mobile="";//手机号
            this.password="";//，密码
        },
        successPoint(msg) {//注册成功的提示
            this.$message({
                message: '恭喜你，'+msg,
                type: 'success',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true
            });
        },
        errorWarning() {
            this.$message({
                message: '用户名或密码错误，请重新输入',
                type: 'error',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true
            });
        },
    handleClick(tab, event) {//注册登录选项卡
        this.clearInfo();
        if(this.loginRegisterOnoff){
            this.loginRegisterTitleText = "注册集设网";
            this.loginRegisterPoint = "已有账号？";
            this.loginRegisterOnoff=false;
            $('#tab-login').show();//登录按钮显示
            $('#tab-register').hide();//注册按钮隐藏
        }else{
            this.loginRegisterTitleText = "登录集设网";
            this.loginRegisterPoint = "还没有账号？";
            this.loginRegisterOnoff=true;
            $('#tab-login').hide();//登录按钮隐藏
            $('#tab-register').show();//注册按钮显示
        }
        
                
        // $("#registerMobile").val("");
        // console.log($("#registerMobile").val(""))

    },
    forgetPw(){//点击忘记密码
        this.loginRegisterTitleText = "忘记密码";
        this.loginRegisterPoint = "我知道密码了";
        $(".thereBox").hide();
    },
    goLogin(){
        $(".thereBox").show();
    },
    forgetForm(){//忘记密码
        this.$validator.validateAll().then(result => {
            if (result) {
                if(!this.forgetVeriNum){
                    this.msgError('请输入验证码');
                    return;
                }else{
                    let formData = {
                        mobile:this.forgetMobile,
                        code:this.forgetVeriNum,
                        password:this.forgetPassword
                    };
                    return axios.post('/repass',formData).then(response => {
                        if(response.data.status==1){
                            this.forgetMobile = "";
                            this.forgetVeriNum = "";
                            this.password = "";
                            this.successPoint('修改成功，请登录');//注册成功提示
                            this.loginLoginName()
                            this.forget = true;
                        }else{
                            this.msgError(response.data.message);
                        }
                        
                    })
                }
                
            }
        }) 
        
    },
    register() {//用户注册
        this.$refs.registerForm.$validator.validateAll().then(result => {
            if (result) {
                let formData = {
                    name : this.name,
                    mobile : this.registerMobile,
                    password : this.password,
                    code : this.veriNum
                };
                return axios.post('/register',formData).then(response => {
                    if(response.data.status==1){
                        this.name = "";
                        this.registerMobile = "";
                        this.password = "";
                        this.successPoint('注册成功，请登录');//注册成功提示
                        this.loginLoginName()
                    }else if(response.data.status==0){
                         this.msgError('验证码输入有误')//验证码输入有误
                    }
               }).catch(error=>{
                   if(error.response.data.errors.mobile){
                       this.msgError('手机号码已注册，请更换手机号码')
                      
                   }else if(error.response.data.errors.name){
                       this.msgError('昵称已注册，请更换昵称')
                   }else{
                       this.msgError('注册失败，请从新注册')
                   }
                   
               })
            }
        }) 
    },
    emitverCode(sort,id){//验证码获取
        if($("#"+id).next().css("display")=="none"){
            var This = this;
            if(sort=='register'){
                if($("#verSpan").css("display")&&this.registerMobile){
                    this.disabledOnoff = true;//发送验证码按钮禁用
                    This.verText =  This.disabledNum+"s";
                    var timer = setInterval(function(){
                        This.verText =  This.disabledNum+"s";
                        This.disabledNum--;
                        if(This.disabledNum==0){
                            This.disabledNum =  59;
                            This.disabledOnoff=false;
                            This.verText="再次获取";
                            clearInterval(timer)
                        }
                    },1000)
                    var formData = {
                        'mobile':this.registerMobile,
                        'method':sort
                    }
                    axios.post('/sendcode',formData).then(response => {
                        if(response.data.status==1){
                            
                        }else{
                            this.msgError('验证码发送失败')
                        }
                    }).catch(error=>{
                        this.msgError('手机号码已注册')
                    })
                }else if(!this.registerMobile){
                    this.msgError('请输入手机号码')
                }
            }else if(sort=='forgotpass'){
                if($("#forgetVerSpan").css("display")&&this.forgetMobile){
                    this.forgetDisabledOnoff = true;//发送验证码按钮禁用
                    This.forgetVerText =  This.forgetDisabledNum+"s";
                    var timer = setInterval(function(){
                        This.forgetVerText =  This.forgetDisabledNum+"s";
                        This.forgetDisabledNum--;
                        if(This.forgetDisabledNum==0){
                            This.forgetDisabledNum =  59;
                            This.forgetDisabledOnoff=false;
                            This.forgetVerText="再次获取";
                            clearInterval(timer)
                        }
                    },1000)
                    var formData = {
                        'mobile':this.forgetMobile,
                        'method':sort
                    }
                    axios.post('/sendcode',formData).then(response => {
                        if(response.data.status==1){
                            
                        }else{
                            this.msgError('验证码发送失败')
                        }
                    }).catch(error => {
                        this.msgError('该手机号未注册');
                    })
                }else if(!this.registerMobile){
                    this.msgError('请输入手机号码')
                }
            }
        }
    },
    userLogin(){//用户登录 
        if(this.loginBtnNo){
            this.loginBtnNo = false;
            this.loginText = "正在登录";
            this.$refs.loginForm.$validator.validateAll().then(result => {
                if (result) {
                    let formData = {
                        mobile: this.mobile,
                        password: this.password
                    }
                    /* this.$store.dispatch('loginRequest', formData)
                    .then(response => {
                        console.log(response)
                        this.loginClose();
                        this.loginText = "登录";
                        this.mobile="";
                        this.password="";
                        this.successPoint("登录成功")
                        this.loginBtnNo = true;
                        if(this.$store.state.AuthUser.toUrlMsg){
                            this.$router.push({path : this.$store.state.AuthUser.toUrlMsg});
                        }
                        
                    }).catch(error => {
                        this.msgError('账号或密码输入错误');
                        this.loginText = '登录';
                        this.loginBtnNo = true;
                    }) */
                    axios.post("/login", formData).then(response => {//登录接口
                        if(response.data.status=='0'){
                            this.msgError('账号或密码输入错误');
                            this.loginText = '登录';
                            this.loginBtnNo = true;
                        }else{
                            jwtToken.setToken(response.data.token)
                            jwtToken.setAuthId(response.data.auth_id)
                            this.setAuthUser();
                            this.loginClose();
                            this.loginText = "登录";
                            this.mobile="";
                            this.password="";
                            this.successPoint("登录成功")
                            this.loginBtnNo = true;
                            if(this.$store.state.AuthUser.toUrlMsg){
                                this.$router.push({path : this.$store.state.AuthUser.toUrlMsg});
                            }
                        }
                    }).catch(error=>{
                        this.msgError('账号或密码输入错误');
                        this.loginText = '登录';
                        this.loginBtnNo = true;
                    })
                    
                }
               
            }) 
        }
        
    },
    msgError(msg) {//账号密码输入错误提示信息
        this.$message({
            message: msg,
            type: 'error',
            customClass : "errorStyle",
            duration : 1500,
            showClose : true
        });
    },
    maskPosition(){//登录弹出框的位置
        this.style.left = (document.body.offsetWidth - 386)/2 +"px";
        this.style.top = (document.documentElement.clientHeight - 403)/2 +"px";
    },
        
    },
    mounted() { 
        this.maskPosition();
        window.onresize = ()=>{
            this.maskPosition();
        }
   },
   updated () {
       if(this.$store.state.AuthUser.loginName =='register'&&this.forget){
            this.loginRegisterOnoff=true;
            this.loginRegisterTitleText = "注册集设网";
            this.loginRegisterPoint = "已有账号？";
            $('#tab-login').show();//登录按钮显示
            $('#tab-register').hide();//注册按钮隐藏
        }else if(this.$store.state.AuthUser.loginName =='login'&&this.forget){
           this.loginRegisterOnoff=false;
           this.loginRegisterTitleText = "登录集设网";
            this.loginRegisterPoint = "还没有账号？";
            $('#tab-login').hide();//登录按钮隐藏
            $('#tab-register').show();//注册按钮显示
        };
        /* if(this.loginRegisterOnoff){
            this.loginRegisterTitleText = "注册集设网";
            this.loginRegisterPoint = "已有账号？";
            this.loginRegisterOnoff=false;
            $('#tab-login').show();//登录按钮显示
            $('#tab-register').hide();//注册按钮隐藏
        }else{
            this.loginRegisterTitleText = "登录集设网";
            this.loginRegisterPoint = "还没有账号？";
            this.loginRegisterOnoff=true;
            $('#tab-login').hide();//登录按钮隐藏
            $('#tab-register').show();//注册按钮显示
        } */
   },
    watch: {
        getUserIcons(val) {
            if(val =='register'){
                this.loginRegisterOnoff=true;
                this.handleClick();
            } 
        }
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
        getUserIcons() {
            return this.$store.state.AuthUser.loginName;
        }
    }
           
}
</script>
<style>
.registerBtn{
    padding-bottom: 25px;
}
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .1s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
/* .fade-enter-active, .fade-leave-active {
  transition: opacity .2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
} */
/* .bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
} 
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}*/

.forgetBox .knowPw{
    text-align: left;
    margin-top: 9px;
    padding-left: 117px;
    font-size: 14px;
    line-height: 18px;
    color: #666;
}
.forgetBox .knowPw button{
    border:none;
    outline: none;
    background: transparent;
    color: #eb5b56;
}
.forgetBox header{
    font-size: 18px;
    line-height: 70px;
    text-align: center;
    font-weight: bold;
    color: #393939;
}
.forgetBox li:nth-of-type(4) input, .forgetBox li:nth-of-type(3) input {
    /* background: url(/images/zcPwImg.png?aa9526b…) no-repeat 10px 7px; */
}
.forgetBox li:nth-of-type(3) input{
    width: 334px;
    padding-left: 10px;
}
.drag{
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index:99;
}
.errorStyle{
    top: 35%;
    font-size: 50px;
}
.loginList li,.registerList{
    position: relative;
}
.mobileImg,.nameImg,.mobilePw{
    position: absolute;
    top: 1px;
    left: 1px;
    width: 38px;
    height: 36px;
    background: #fff url(/images/telBgi.png) no-repeat 11px 8px;
}
.mobilePw{
    background: #fff url(/images/pwBgi.png) no-repeat 11px 8px;
}
.nameImg{
    width: 39px;
    background: #fff url(/images/nameImg.png) no-repeat 11px 8px;
}
.form-control:focus{
    border-color:#ddd;
    box-shadow: none;
}
.sucPoint{
    position: fixed;
    top: 25%;
    font-size: 50px;
}
.loginMask .loginContent .el-tabs__nav #tab-login:hover{
    /* color: #333!important; */
}
.loginMask .loginContent .el-tabs__nav #tab-register{
    color: #eb5b56!important;
    width: 145px;
    text-align:right;
}
.loginMask .loginContent .el-tabs__nav #tab-register,.loginPoint{
    font-size: 14px;
    line-height: 22px;
    color: #bababa;
    height: 22px;
}
.loginRegisterTitle{
    display:block;
    font-size: 16px;
    line-height: 26px;
    text-align: left;
    padding-left:33px;
    height: 26px;
    margin-top: 29px;
    color: #383838;
    font-weight: bold;
}
.loginPoint{
    position:absolute;
    top:63px;
    left:32px;
    z-index:9;
}
.loginMask .loginContent .el-tabs__nav #tab-login{
    display:none;
    font-size: 14px;
    line-height: 22px;
    color: #bababa;
    height: 22px;
    text-align: right;
    width: 130px;
    color: #eb5b56!important;
    margin-top:8px;
}
.loginList{
    padding-top: 24px;
}
.loginList li{
    margin-bottom: 20px;
}
.thereBox{
    position: relative;
    height: 130px;
}
.thereLine{
    border-top: 1px solid #dddddd;
    width: 315px;
    margin: 0 auto;
    margin-top: 20px;
}
.thereText{
    position: absolute;
    top:-20px;
    left: 138px;
    font-size: 14px;
    line-height: 40px;
    color: #434343;
    padding: 0 13px;
    background: #fff;
}
.thereIcon{
    text-align:center;
    margin-top: 33px;
}
.thereIcon div{
    display:inline-block;
    width: 42px;
    height: 42px;
    cursor:pointer;
}
.thereIcon a:nth-of-type(1) div{
    background: url(./img/thereWe.png) no-repeat center;
    margin-right:24px;
}
.thereIcon a:nth-of-type(2) div{
    background: url(./img/thereQq.png) no-repeat center;
    margin-left:30px;
}
.thereIcon a:nth-of-type(1) div:hover{
    background: url(./img/thereWeHover.png) no-repeat center;
}
.thereIcon a:nth-of-type(2) div:hover{
    background: url(./img/thereQqHover.png) no-repeat center;
}
#forgetPw{
    width: 122px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color: #fff;
    border:none;
    padding: 0;
    outline: none;
    background: #ea514b;
    margin-left: 1px;
    border-radius: 4px;
}
#forgetPw:hover{
    background: #e3837f;
}
</style>
